<template>

    <div class="min-body">
        <div class="header">
            <p class="til">{{time}}</p>
            <!-- <div class="time-box">{{time}}</div> -->
        </div>
        <div id="ChinaLineMap" style="height: 650px;">
 
        </div>
    </div>

</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china'

// import 'echarts/extension/bmap/bmap'
// require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'
export default {
    name: 'BaiDuMap',
    mixins: [ ],
    props: {
    },
    data() {
        return {
            time:''
        }
    },
    created() {
            this.loadTime()
 
    },
    mounted() {
        this.loadChinaLineMap()
    },
    beforeDestroy() {
        
    },
    methods: {
        
        updateTime(){
            var that = this
            var cd = new Date();
            var  time = that.zeroPadding(cd.getHours(), 2) + ':' + that.zeroPadding(cd.getMinutes(), 2) + ':' + that.zeroPadding(cd.getSeconds(), 2);
            var date = that.zeroPadding(cd.getFullYear(), 4) + '年' + that.zeroPadding(cd.getMonth()+1, 2) + '月' + that.zeroPadding(cd.getDate(), 2) + '日 ';
            that.time =  date+" "+time
        },

        zeroPadding(num, digit) {
            var zero = '';
            for(var i = 0; i < digit; i++) {
                zero += '0';
            }
            return (zero + num).slice(-digit);
        },

        //加载时间
        loadTime(){
            var that = this
            //var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            setInterval(function () {
                that.updateTime()
            }, 1000);
            that.updateTime()
        },
 

        loadChinaLineMap(){
            var myChart=echarts.init(this.$refs.map);
            myChart.setOption(option, true);
        },


        //加载中国飞线地图
        loadChinaLineMap() {
            var newarray = [];
            var echarts = require('echarts');
            var myCharts = echarts.init(document.getElementById('ChinaLineMap'));
            var geoCoordMap = {
                    '黑龙江': [127.9688, 45.368],
                    '内蒙古': [110.3467, 41.4899],
                    "吉林": [125.8154, 44.2584],
                    '北京': [116.4551, 40.2539],
                    "辽宁": [123.1238, 42.1216],
                    "河北": [114.4995, 38.1006],
                    "天津": [117.4219, 39.4189],
                    "山西": [112.3352, 37.9413],
                    "陕西": [109.1162, 34.2004],
                    "甘肃": [103.5901, 36.3043],
                    "宁夏": [106.3586, 38.1775],
                    "青海": [101.4038, 36.8207],
                    "新疆": [87.9236, 43.5883],
                    "西藏": [91.11, 29.97],
                    "四川": [103.9526, 30.7617],
                    "重庆": [108.384366, 30.439702],
                    "山东": [117.1582, 36.8701],
                    "河南": [113.4668, 34.6234],
                    "江苏": [118.8062, 31.9208],
                    "安徽": [117.29, 32.0581],
                    "湖北": [114.3896, 30.6628],
                    "浙江": [119.5313, 29.8773],
                    "福建": [119.4543, 25.9222],
                    "江西": [116.0046, 28.6633],
                    "湖南": [113.0823, 28.2568],
                    "贵州": [106.6992, 26.7682],
                    "云南": [102.9199, 25.4663],
                    "广东": [113.12244, 23.009505],
                    "广西": [108.479, 23.1152],
                    "海南": [110.3893, 19.8516],
                    '上海': [121.4648, 31.2891],
                    '台湾': [124.3430, 25.5630],
                };
            var geoCoordColor = [
                    {name:'黑龙江',value: 1},
                    {name:'内蒙古',value: 2},
                    {name:"吉林",value: 3},
                    {name:'北京',value: 4},
                    {name:"辽宁",value: 5},
                    {name:"河北",value: 6},
                    {name:"天津",value: 7},
                    {name:"山西",value: 8},
                    {name:"陕西",value:9},
                    {name:"甘肃",value: 10},
                    {name:"宁夏",value: 11},
                    {name:"青海",value: 12},
                    {name:"新疆",value: 13},
                    {name:"西藏",value: 14},
                    {name:"四川",value: 15},
                    {name:"重庆",value: 16},
                    {name:"山东",value: 17},
                    {name:"河南",value: 18},
                    {name:"江苏",value: 19},
                    {name:"安徽",value: 20},
                    {name:"湖北",value: 21},
                    {name:"浙江",value: 22},
                    {name:"福建",value: 23},
                    {name:"江西",value: 24},
                    {name:"湖南",value: 25},
                    {name:"贵州",value: 26},
                    {name:"云南",value: 27},
                    {name:"广东",value: 28},
                    {name:"广西",value: 29},
                    {name:"海南",value: 30},
                    {name:'上海',value: 31},
                    {name:'台湾',value: 31}
                ];
            var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var fromCoord = geoCoordMap[dataItem[0].name];
                        var toCoord = geoCoordMap[dataItem[1].name];
                        if (fromCoord && toCoord) {
                            res.push({
                                fromName: dataItem[0].name,
                                toName: dataItem[1].name,
                                coords: [fromCoord, toCoord]
                            });
                        }
                    }
                    return res;
                };
            //飞线数据
            var chinaData = [ ];
            //获取飞线数据
            var res = [
                { "name": "浙江", "value": 4341 },
                { "name": "四川", "value": 2980 },
                { "name": "山东", "value": 1590 },
                { "name": "湖南", "value": 1163 },
                { "name": "江西", "value": 1108 },
                { "name": "广东", "value": 1100 },
                { "name": "重庆", "value": 838 },
                { "name": "黑龙江", "value": 534 },
                { "name": "内蒙古", "value": 534 },
                { "name": "北京", "value": 473 },
                { "name": "新疆", "value": 473 },
                { "name": "西藏", "value": 473 },
            ]
            res.forEach(function (item) {
                newarray.push(item.value);
                var array = [];
                var o = {};
                var o1 = {};
                o.name = item.name;
                o.value = item.value;
                array.push(o);
                
                o1.name = '山西';
                array.push(o1);
                chinaData.push(array);
            });
            var series = [];
            [['山西', chinaData]].forEach(function (item) {

                console.log( item[2] );

                series.push(
                    {
                        name: item[2],
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 4, //箭头指向速度，值越小速度越快
                            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 3, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: '#FCE931',
                                width: 0.1, //尾迹线条宽度
                                opacity: 0.5, //尾迹线条透明度
                                curveness: .3 //尾迹线条曲直度
                            }
                        },
                        data: convertData(item[1])
                    },
                    {
                        //       name: item[1],
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel:3,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        symbolSize: function (val) {
                            //return 3 + val[2] / 10;
                            return 20
                        },
                        itemStyle: {
                            normal: {
                                color: '#FCE931'
                            }
                        },
                        data: item[1].map(function (dataItem) {
                            return {
                                name: dataItem[0].name,
                                value: geoCoordMap[dataItem[0].name].concat(33)
                            };
                        })
                    },
                    {
                        name: '中国',
                        type: 'map',
                        zlevel:0,
                        mapType: 'china',
                        zoom: 1.2,
                        selectedMode: 'single',
                        itemStyle: {
                            normal: {
                                label: {
                                    color: "#fff",
                                    show: true
                                },
                                borderWidth: .5,
                                borderColor: '#009fe0',
                                areaColor:'#009fe0',
                            },
                            emphasis: {
                                borderWidth: .5,
                                borderColor: '#00f4ff',
                                shadowColor: '#FCE931',
                                shadowBlur: 10,
                                areaColor: '#ffa800'
                            }
                        },
                        data: geoCoordColor.map(function (dataItem) {
                            return {
                                name: dataItem.name,
                                value: geoCoordMap[dataItem.name].concat([dataItem.value])
                            };
                        })

                    }
                )
            });

            console.log(series );

            var option = {
                    background: "none",
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            //console.log(params);
                            if (params.componentSubType == "map") {
                                if (params.data) {
                                    return params.name + ' : ' + params.data.value;
                                }
                                return params.name + ' : 0';
                            }
                        }
                    },
                    visualMap: {
                        //图例值控制
                        type: 'piecewise',
                        min: 0,
                        max: "",
                        // pieces: [
                        //     {gt: 1, lt: 99},
                        //     {gt: 100, lt: 499},
                        //     {gt: 500, lt: 999},
                        //     {gt: 1000, lt: 9999},
                        //     {gt:10000}
                        // ],
                        realtime: false,
                        calculable: false,
                        splitNumber: 5,
                        show: true,
                        textStyle: {
                            color: '#fff'
                        },
                        inRange: {
                            color: ['#105D98', '#DD5145', '#105D98', '#105D98', '#105D98']
                        },
                        // formatter: function (value) {
                        //     console.log(value);
                        //     return covertColor(value); // 范围标签显示内容。
                        // },
                        formatter: function (value, value2) {
                            var num = 0;
                            var num2 = 0;
                            if (value != -Infinity && isNaN(value) == false) {
                                num = value;
                            }
                            if (isNaN(value2) == false) {
                                num2 = value2;
                            }
                            return parseInt(num) + '-' + parseInt(num2) + '人'; // 范围标签显示内容。
                        }
                    
                    },
                    visualMap: {
                        type:'piecewise',
                        min: 0,
                        max: 33,
                        realtime: false,
                        calculable: true,
                        splitNumber:21,
                        show:false,
                        inRange: {
                            color:['#C40000', '#F03566', '#9B4E9A', '#105D98', '#EB7A20']
                        }
                    },
                    selectedMode: 'multiple',
                    geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        zoom: 1.2,
                        roam: false,
                        itemStyle: {
                            normal: {
                                borderColor: '#3b56b5',
                                borderWidth: 2,
                                areaColor: 'rgba(0,0,0,0)',
                                shadowColor: '#2485af',
                                shadowBlur: 20
                            },
                            emphasis: {
                                areaColor: 'green'
                            }
                        }
                    },
                    series: series
                };
            //var max = Math.max.apply(Math, newarray);
            //option.visualMap.max = max;
            myCharts.clear();
            myCharts.setOption(option);
        },




    }
}
</script>

<style lang="scss" scoped>
    #ChinaLineMap{
        width: 100%;
        height:calc(100% - 7vh);
    }
    .min-body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #010827;
        .header {
            position: relative;
            height: 6vh;
            background-color: #cccccc33;
            /* background: url("~@/assets/img/top-bg.png") no-repeat; */
            background-size: 100% 100%;
            user-select: none;
            .til {
                width: 100%;
                font-size: 1.2vw;
                font-weight: bold;
                text-align: center;
                line-height: 6vh;
                letter-spacing: 0.3vw;
                color: #fff;
                margin: 0;
            }
 
            .til:before {
                content: '';
                display: inline-block;
                width: 5vh;
                height: 5vh;
 
                margin-right: 1vw;
                vertical-align: middle;
 
            }
            .time-box{
                font-size: 1.3vw;
                letter-spacing: 0.2vw;
                color: #00FFFF;
                font-weight: normal;
                position: absolute;
                top: 2.2vh;
                right: 1vw;
 
                z-index: 100;
            }
        }
    }
 
 
</style>
